<script lang="ts" setup>
import { ref, onMounted, computed, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
import jyglService from '@/api/jygl'
import xtpzService from '@/api/xtpz'
import { formItems } from '../form-item'
import { TableItem } from '@/api/common'
import { useSidebarStore } from '@/store/sidebar'
import TreeUtilDTO from '@/utils/tree'
import formBox from '@/components/queryTable/form/index.vue'
import tableBox from '@/components/queryTable/table/index.vue'
import jycDialog from '../dialogs/jyc-dialog.vue'
import dalyJysqDialog from '../dialogs/daly-jysq-dialog.vue'
import treeSelect from '@/components/tree-select-edl/index.vue'
import { DalySpdaListQueryParam, DalySsdaListQueryParam } from '@/api/jygl-dto'
import { useMainStore } from '@/store/main'

const mainStore = useMainStore()

// 菜单store，获取它收起/展开状态
const sideStore = useSidebarStore()
const loading = ref<boolean>(false)
// 入参
const leftSmall = ref<boolean>(false)
const rightSmall = ref<boolean>(true)
const dragFlag = ref<boolean>(false)

const moveLenLeft = ref<number>(0)
const moveLenHeight = ref<number>(0)

const jysqDialogRef = ref()
/*
 * 拖拽事件
 */
// 初始距离
// 是否按下
const dragstart = () => {
  dragFlag.value = true
}

const dragLeft = (e: any) => {
  if (!dragFlag.value || !e.clientX) {
    return
  }
  let left = 0
  if (sideStore.collapse) {
    left = 86
  } else {
    left = 206
  }
  if (e.clientX && e.clientX - left <= 200) {
    moveLenLeft.value = 200
  } else if (e.clientX && e.clientX - left >= 300) {
    moveLenLeft.value = 300
  } else {
    moveLenLeft.value = e.clientX - left
  }
}

const dragend = () => {
  dragFlag.value = false
}

const dragRight = (e: any) => {
  if (!dragFlag.value || !e.clientY) {
    return
  }
  if (e.clientY && window.innerHeight - e.clientY - 26 <= 270) {
    moveLenHeight.value = 270
  } else if (e.clientY && window.innerHeight - e.clientY - 26 >= 400) {
    moveLenHeight.value = 400
  } else {
    moveLenHeight.value = window.innerHeight - e.clientY - 26
  }
}

const formLabel = ref()
// 诉讼档案查询条件
const ssFilter = ref({
  ajmc: '',
  ay: [],
  bgqx: '',
  bmsah: '',
  dh: '',
  dsr: '',
  gdnd: '',
  gjz: '',
  jcg: '',
  ljdw: [],
  mj: '',
  dwbm: '',
  cxlx: '1',
})

// 视频档案查询条件
const spFilter = ref({
  bgqx: '',
  dh: '',
  gdnd: '',
  gjz: '',
  ljdw: [],
  lzz: '',
  mj: '',
  splx: '',
  tm: '',
  dwbm: '',
  cxlx: '1',
})

const form = ref({
  pageSize: 20,
  pageNum: 1,
  filter: ssFilter.value as DalySpdaListQueryParam | DalySsdaListQueryParam,
})

const total = ref<number>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
  }
})

const optionsObjs = ref<any>({})
// 生命周期

onMounted(async () => {
  loading.value = true
  queryDlrsjqx()
  dalyTreeRef.value.setCurrentKey(1)
  formLabel.value = await formItems('ssflcx')
  loading.value = false
})

const organizationList = ref<any[]>([])
const queryDataObj = ref({
  dwbm: '' as any,
  cxlx: '1',
})
const queryDlrsjqx = () => {
  xtpzService.getDlrsjqx({}).then((res: any) => {
    organizationList.value = TreeUtilDTO.getTreeData(
      (res.data.sqdwxxList || []).map((el: any) => ({
        ...el,
        mc: el.dwmc,
        dm: el.dwbm,
        fdm: el.fdwbm,
      })),
      'dwbm',
      'fdwbm',
    )
    if (organizationList.value.length > 0) {
      ssFilter.value.dwbm = organizationList.value[0]?.dm
      spFilter.value.dwbm = organizationList.value[0]?.dm
      queryDataObj.value.dwbm = organizationList.value[0]?.dm
    } else {
      ssFilter.value.dwbm = mainStore.userInfo.dwbm
      spFilter.value.dwbm = mainStore.userInfo.dwbm
      queryDataObj.value.dwbm = mainStore.userInfo.dwbm
    }
    optionsObjs.value.ljdw = (organizationList.value[0]?.sqbmxxList || []).map((el: any) => {
      return {
        dwmc: el.bmmc,
        dwbm: el.bmbm,
      }
    })
    // 分页
    changePageNum(1)
  })
}

watch(
  () => ssFilter.value.dwbm,
  () => {
    const dw = TreeUtilDTO.findNode(organizationList.value, ssFilter.value.dwbm, 'dwbm')
    optionsObjs.value.ljdw =
      dw?.sqbmxxList?.map((el: any) => {
        return {
          dwbm: el.bmbm,
          dwmc: el.bmmc,
        }
      }) || []
  },
  {
    deep: true,
  },
)

watch(
  () => spFilter.value.dwbm,
  () => {
    const dw = TreeUtilDTO.findNode(organizationList.value, spFilter.value.dwbm, 'dwbm')
    optionsObjs.value.ljdw =
      dw?.sqbmxxList?.map((el: any) => {
        return {
          dwbm: el.bmbm,
          dwmc: el.bmmc,
        }
      }) || []
  },
  {
    deep: true,
  },
)

const getGdsxxJd = (val: string) => {
  ssFilter.value.dwbm = val
  spFilter.value.dwbm = val
  form.value.filter.dwbm = val
  getTableData()
}

// 左侧分类树
const dalyTree = ref([
  { mc: '诉讼档案', dm: 1, cj: '1', children: [], jylxdm: 'gd0420001' },
  { mc: '文书档案', dm: 2, cj: '1', children: [] },
  {
    mc: '音像档案',
    dm: 3,
    cj: '1',
    children: [
      {
        mc: '视频档案',
        dm: 31,
        cj: '2',
        jylxdm: 'gd0420002',
      },
      {
        mc: '音频档案',
        dm: 32,
        cj: '2',
      },
      {
        mc: '照片档案',
        dm: 33,
        cj: '2',
      },
    ],
  },
  { mc: '会计档案', dm: 4, children: [], cj: '1' },
  { mc: '其他', dm: 5, children: [], cj: '1' },
])

// 诉讼档案表头
const sstitles = ref([
  {
    label: '档号',
    prop: 'dh',
    width: 200,
    custom: false,
    sort: true,
    dqfs: 'left',
  },
  { label: '立卷单位', prop: 'bmmc', width: 120, dqfs: 'left' },
  { label: '归档年度', prop: 'gdnd', width: 120, dqfs: 'left' },
  { label: '保管期限', prop: 'bgqx', width: 120, dqfs: 'left' },
  { label: '密级', prop: 'mj', width: 100, dqfs: 'left' },
  { label: '案件名称', prop: 'ajmc', width: 120, dqfs: 'left' },
  { label: '部门受案号', prop: 'bmsah', width: 200, dqfs: 'left' },
  { label: '检察官', prop: 'jcg', width: 120, dqfs: 'left' },
  { label: '当事人', prop: 'dsr', width: 120, dqfs: 'left' },
  { label: '案由', prop: 'ay', width: null, dqfs: 'left' },
])

// 视频档案表头
const sptitles = ref([
  {
    label: '档号',
    prop: 'dh',
    width: 200,
    custom: false,
    sort: true,
    dqfs: 'left',
  },
  { label: '立卷单位', prop: 'bmmc', width: 120, dqfs: 'left' },
  { label: '归档年度', prop: 'gdnd', width: 120, dqfs: 'left' },
  { label: '保管期限', prop: 'bgqx', width: 120, dqfs: 'left' },
  { label: '密级', prop: 'mj', width: 120, dqfs: 'left' },
  { label: '题名', prop: 'tm', width: 120, dqfs: 'left' },
  { label: '视频类型', prop: 'splx', width: 120, dqfs: 'left' },
  { label: '录制者', prop: 'lzz', width: 120, dqfs: 'left' },
  {
    label: '录制日期',
    prop: 'lzrq',
    width: null,
    dqfs: 'left',
    format: 'YYYY-MM-DD',
  },
])

// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: sstitles.value,
})

const fldm = ref(1)
const jylxData = ref({
  jylxdm: 'gd0420001',
  jylxmc: '诉讼档案',
})
const getTableData = () => {
  const params = form.value
  loading.value = true
  tableData.value.data = []
  let queryFn = null
  switch (fldm.value) {
    case 1:
      queryFn = jyglService.querySsdaList
      break
    case 31:
      queryFn = jyglService.querySpdaList
      break
  }
  queryFn &&
    queryFn(params)
      .then((res) => {
        if (res) {
          tableData.value.data = res.data.list
          total.value = res.data.total
          dawsTree.value = undefined
        }
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
      .finally(() => {
        loading.value = false
      })
}

// 左侧分类树实例
const dalyTreeRef = ref()
const handleNodeClick = async (node: { mc: string; dm: number; jylxdm: string }) => {
  fldm.value = node.dm
  jylxData.value.jylxdm = node.jylxdm
  jylxData.value.jylxmc = node.mc
  if (fldm.value === 1) {
    formLabel.value = await formItems('ssflcx')
    tableData.value.titles = sstitles.value
    form.value.filter = ssFilter.value
  }
  if (fldm.value === 31) {
    formLabel.value = await formItems('spflcx')
    tableData.value.titles = sptitles.value
    form.value.filter = spFilter.value
  }
  getTableData()
}

// 文书信息
const dawsTree = ref<any>()
// 点击表格每一行
const rowData = ref()
const rowClick = (row: any) => {
  if (fldm.value === 31) {
    dawsTree.value = undefined
    rightSmall.value = true
    return
  }
  const params = {
    ajmc: row.ajmc,
    dabh: row.dabh,
  }
  rowData.value = row
  dialogTableData.value = []

  jyglService
    .getSsdaws(params)
    .then((res) => {
      const filterTreeList = res.data?.filter((item) => item.mc !== '待编目材料')
      dawsTree.value = TreeUtilDTO.getTreeData(filterTreeList || [], 'dm', 'fdm')
      rightSmall.value = false
      nextTick(() => {
        // 回显树选中效果
        const obj = dialogTableData.value.find((el: any) => {
          return el.dabh === row.dabh
        })
        // obj.checkKeys
        if (obj && obj.checkKeys && obj.checkKeys.length) {
          filterTreeRef.value.setCheckedKeys(obj.checkKeys)
        }
      })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 分页
 */
const changePageNum = (val: number) => {
  form.value.pageNum = val
  getTableData()
}

/*
 * 分页
 */
const changePageSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  getTableData()
}

/*
 * 查询按钮
 */
const searchTable = (data: any) => {
  let newObj: any = {}
  for (const key in data) {
    if (key.endsWith('-rq')) {
      const kssj = key.replace('-rq', 'ksrq')
      const jssj = key.replace('-rq', 'jsrq')
      if (data[key]?.length) {
        newObj[kssj] = data[key][0]
        newObj[jssj] = data[key][1]
      } else {
        newObj[kssj] = ''
        newObj[jssj] = ''
      }
    }
    newObj[key] = data[key]
  }
  form.value.filter = newObj
  getTableData()
}

/*
 * 点击借阅申请
 */
const openJysqDialog = () => {
  if (fldm.value === 1) {
    jysqDialogRef.value.openDialog('add', '诉讼档案', dialogTableData.value, {
      ...rowData.value,
      ...jylxData.value,
    })
  } else if (fldm.value === 31) {
    jysqDialogRef.value.openDialog('add', '视频档案', yspSelect.value, {
      ...rowData.value,
      ...jylxData.value,
    })
  }
}

// 打开借阅车
const jycDialogRef = ref()
const openJycDialog = () => {
  jycDialogRef.value.openDialog()
}

// 加入借阅车
const addToJycjl = (value: string) => {
  let paramsList = null
  if (value === 'ssda') {
    dialogTableData.value.forEach((el: any) => {
      if (el.children && el.children.length > 0) {
        paramsList = el.children.map((item: any) => {
          return {
            ajbh: rowData.value.ajbh,
            ajdh: rowData.value.dh,
            bmsah: rowData.value.bmsah,
            dabh: rowData.value.dabh,
            jydalxdm: jylxData.value.jylxdm,
            jydalxmc: jylxData.value.jylxmc,
            jyrbh: mainStore.userInfo.ryid,
            jyrxm: mainStore.userInfo.xm,
            jysjbh: item.cj === '1' ? rowData.value.ajbh : item.dm,
            jysjlxdm:
              item.cj === '1'
                ? 'gd0410001'
                : item.cj === '2'
                ? 'gd0410003'
                : item.cj === '3'
                ? 'gd0410002'
                : 'gd0410004',
            jysjlxmc:
              item.cj === '1'
                ? '案件'
                : item.cj === '2'
                ? '文书案卷'
                : item.cj === '3'
                ? '文书目录'
                : '视频',
            sjdwbm: rowData.value.ljdwbm,
            sjdwmc: rowData.value.ljdw,
          }
        })
      }
    })
  } else {
    paramsList = yspSelect.value?.map((item: any) => {
      return {
        ajbh: item.ajbh,
        dabh: item.dabh,
        jydalxdm: jylxData.value.jylxdm,
        jydalxmc: jylxData.value.jylxmc,
        jyrbh: mainStore.userInfo.ryid,
        jyrxm: mainStore.userInfo.xm,
        jysjbh: item.mlbh,
        jysjlxdm: 'gd0410004',
        jysjlxmc: '视频',
        sjdwbm: item.dwbm,
        sjdwmc: item.ljdw,
      }
    })
  }

  const params = {
    list: paramsList,
  }
  jyglService
    .addJycjl(params)
    .then((res) => {
      if (res.data.czjg) {
        ElMessage.success('添加成功')
      }
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/*
 * 勾选视频档案
 */
const yspSelect = ref([])
const selectionChange = (row: any) => {
  yspSelect.value = row
}
// 加入借阅车关键词筛选
const treeGjzValue = ref()
const filterTreeRef = ref()

// 文字过滤
const filterTree = () => {
  filterTreeRef.value?.filter(treeGjzValue.value)
}

/**
 * 树节点过滤
 */
const filterNode = (value: any, data: any) => {
  let flag = true
  if (value) {
    if (typeof value === 'string') {
      // 文字过滤
      flag = data['mc'].indexOf(value) !== -1
    }
  }
  return flag
}

/*
 * 勾选诉讼档案目录
 */
// const checkChange = (datas: any) => {
//   const nodes = filterTreeRef.value?.getCheckedNodes() as any
//   // const nodes = filterTreeRef.value?.getHalfCheckedNodes() as any
//   let newArr = nodes || []
//   checkNodes.value = Array.from(new Set(newArr))
// }
const dialogTableData = ref<any>([])
const check = (data: any, checks: any) => {
  dialogTableData.value = dialogTableData.value.filter((el: any) => {
    return el.dabh !== rowData.value.dabh
  })
  if (checks.checkedKeys.length) {
    dialogTableData.value.push({
      ...rowData.value,
      children: [
        ...checks.checkedNodes.map((el: any) => {
          return { ...el, children: [] }
        }),
        ...checks.halfCheckedNodes.map((el: any) => {
          return { ...el, children: [] }
        }),
      ],
      checkKeys: checks.checkedKeys,
    })
  }
}
</script>
<template>
  <div class="container">
    <div
      class="left"
      :class="{ small: leftSmall }"
      :style="{ width: moveLenLeft ? moveLenLeft + 'px' : '' }"
    >
      <div class="left-img" @click="leftSmall = !leftSmall">
        <img src="@/assets/images/zsq.png" alt="" v-if="!leftSmall" />
        <img src="@/assets/images/ysq.png" alt="" v-else-if="leftSmall" />
      </div>
      <!-- 单位选择 -->
      <div class="select-tree" v-if="!leftSmall">
        <tree-select
          ref="treeSelectRef"
          style="width: 100%"
          v-model="form.filter.dwbm"
          node-key="dwbm"
          :treeProps="{
            children: 'children',
            label: 'dwmc',
            value: 'dwbm',
          }"
          :options="organizationList"
          :clearable="false"
          :check-strictly="false"
          :isLeafNode="false"
          @update:modelValue="getGdsxxJd"
        >
        </tree-select>
      </div>
      <el-tree
        ref="dalyTreeRef"
        :data="dalyTree"
        :props="{ label: 'mc', children: 'children' }"
        node-key="dm"
        highlight-current
        @node-click="handleNodeClick"
      >
        <template #default="{ data }">
          <span class="custom-tree-node">
            <img v-if="data.cj === '1'" src="/src/assets/images/file-icon.png" alt="" />
            <img v-if="data.cj === '2'" src="/src/assets/images/text-icon.png" alt="" />
            <span>&nbsp;{{ data.mc }}</span>
          </span>
        </template>
      </el-tree>
    </div>

    <!--拖动div-->
    <div
      class="search-drag-box"
      :draggable="true"
      title="可左右拖动"
      @dragstart="dragstart()"
      @dragend="dragend()"
      @drag="dragLeft($event)"
    >
      <div class="dragImg">
        <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
      </div>
    </div>

    <div class="right" :style="{ width: moveLenLeft ? `calc(100% - ${moveLenLeft + 12}px)` : '' }">
      <div
        class="right-top"
        :style="{ height: moveLenHeight ? `calc(100% - ${moveLenHeight + 12}px)` : '' }"
      >
        <!--表单-->
        <div class="form-box">
          <form-box
            ref="formBoxRef"
            :formLabel="formLabel"
            :formData="form.filter"
            :moreShow="true"
            :optionsObj="optionsObjs"
            :queryDataObj="queryDataObj"
            @searchEvent="searchTable"
          />
        </div>
        <div class="button-group" :class="fldm === 31 ? 'button-between' : 'button-end'">
          <div class="button-cart" v-if="fldm === 31">
            <el-button type="primary" :disabled="yspSelect.length === 0" @click="addToJycjl('spda')"
              >加入借阅车</el-button
            >
          </div>
          <div class="button-style">
            <button class="btn_operation" @click="openJycDialog">
              <div class="btn-jyc"></div>
              借阅车
            </button>
            <button class="btn_operation" @click="openJysqDialog()">
              <div class="btn-sqjy"></div>
              借阅申请
            </button>
            <button class="btn_operation" @click="changePageNum(1)">
              <div class="btn-refresh"></div>
              刷新
            </button>
          </div>
        </div>
        <!--表格-->
        <div class="table-box">
          <table-box
            :gnbm="fldm === 1 ? 'dacx-ssflcx' : 'dacx-spflcx'"
            ref="tableBoxRef"
            :selectShow="fldm === 31 ? true : false"
            :table-data="tableData"
            :formParams="form"
            :getTableDataParam="page"
            :tableInfo="{ total: page.total }"
            :highlight-current-row="true"
            @changeCurrent="changePageNum"
            @changeSize="changePageSize"
            @rowClick="rowClick"
            @selectionChange="selectionChange"
          >
          </table-box>
        </div>
      </div>
      <!--拖动div-->
      <div
        class="table-drag-box"
        v-if="dawsTree && fldm === 1"
        :draggable="true"
        title="可上下拖动"
        @dragstart="dragstart()"
        @dragend="dragend()"
        @drag="dragRight($event)"
      >
        <div class="dragImg">
          <el-icon class="dargIcon" color="#bdcae2"><MoreFilled /></el-icon>
        </div>
      </div>
      <div
        v-if="dawsTree && fldm === 1"
        class="right-bottom"
        :class="{ small: rightSmall }"
        :style="{ height: moveLenHeight ? `${moveLenHeight}px` : '' }"
      >
        <div class="right-img" @click="rightSmall = !rightSmall">
          <img src="@/assets/images/zsq.png" alt="" v-if="!rightSmall" />
          <img src="@/assets/images/ysq.png" alt="" v-else-if="rightSmall" />
        </div>

        <div style="height: 100%" v-show="!rightSmall">
          <div class="add-cart">
            <el-button
              type="primary"
              :disabled="dialogTableData.length === 0"
              @click="addToJycjl('ssda')"
              >加入借阅车</el-button
            >
            <el-input
              v-model="treeGjzValue"
              class="cart-input"
              placeholder="输入关键字过滤"
              @change="filterTree"
            >
              <template #suffix>
                <el-icon @click="filterTree" class="el-input__icon"><Search /></el-icon>
              </template>
            </el-input>
          </div>
          <div class="tree-box">
            <el-tree
              ref="filterTreeRef"
              :data="dawsTree"
              highlight-current
              :props="{ label: 'mc', children: 'children' }"
              node-key="dm"
              show-checkbox
              :check-strictly="false"
              :filter-node-method="filterNode"
              @check="check"
            >
              <template #default="{ data }">
                <span class="custom-tree-node">
                  <span>{{ data.mc }} ({{ data.sl }})</span>
                </span>
              </template>
            </el-tree>
          </div>
        </div>
      </div>
    </div>
    <!-- 借阅车弹框 -->
    <jyc-dialog ref="jycDialogRef" :jylxData="jylxData"></jyc-dialog>
    <!-- 新增借阅申请 -->
    <!-- @refresh="getTableData" -->
    <daly-jysq-dialog ref="jysqDialogRef" />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left {
    width: 250px;
    height: 100%;
    border: 1px solid #dae4f1;
    position: relative;
    background-color: #fff;
    &.small {
      width: 16px !important;
      border: none !important;
      .el-tree {
        display: none;
      }
    }
    .el-tree {
      :deep(.el-tree-node__content) {
        height: 40px;
      }
    }
    .select-tree {
      padding: 5px;
    }
  }

  .left > .left-img {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: calc(50% - 27px);
    z-index: 9;
  }

  .right {
    flex: 1;
    width: calc(100% - 262px);
    height: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .right-top {
      flex: 1;
      height: calc(100% - 284px);
      border: 1px solid #dae4f1;
      width: 100%;
      .form-box {
        width: 100%;
        // text-align: right;
        padding: 10px 10px 0px 10px;
      }

      .button-group {
        padding: 0 10px 10px 10px;
        display: flex;
        // justify-content: space-between;
      }

      .button-between {
        justify-content: space-between;
      }

      .button-end {
        justify-content: flex-end;
      }

      .table-box {
        padding: 0 10px;
        height: calc(100% - 116px);
      }
      .container {
        flex-direction: column;
      }
    }
    .right-bottom {
      height: 270px;
      border: 1px solid #dae4f1;
      position: relative;
      &.small {
        height: 16px !important;
        border: none !important;
      }
      .right-img {
        z-index: 9;
        cursor: pointer;
        position: absolute;
        left: calc(50% - 4px);
        top: -23px;
        transform: rotate(-90deg);
      }
      .add-cart {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        .cart-input {
          width: 320px;
          .el-input__icon {
            cursor: pointer;
          }
        }
      }
      .tree-box {
        height: calc(100% - 60px);
        overflow-y: auto;
      }
    }
  }
}

.search-drag-box {
  margin: 0 1px;
  flex-shrink: 0;
  width: 10px;
  height: 100%;
  cursor: col-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  .dragImg {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .dargIcon {
      font-size: 29px;
      transform: rotate(90deg);
    }
  }
}
.table-drag-box {
  margin: 1px 0 2px;
  flex-shrink: 0;
  height: 10px;
  width: 100%;
  cursor: row-resize;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  .dragImg {
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    .dargIcon {
      font-size: 29px;
    }
  }
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  border-right: none !important;
  color: #0090ff;
  background-color: #d9edff;
}
</style>
